<template>
  <div class="orderDetail" :class="{ 'show-more-open': showMore }">
    <div class="energy-title">
      <div class="nav-left">
        <span class="iconfont backHistory" @click="spotCheckView">
          &#xe6eb;
        </span>
      </div>
      <div class="nav-center">
        {{ detail.record.replaceType === 1 ? "设备更换记录" : "部件更换记录" }}
      </div>
      <div class="nav-right">
        <iconSvg
          name="home"
          w="20px"
          h="22px"
          class="right_icon"
          @click.native="backToHomepage"
        ></iconSvg>
      </div>
    </div>
    <div class="cate-nfo">
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">设备名称：</div>
          <div class="info-value">{{ detail.record.deviceName || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">设备编号：</div>
          <div class="info-value">{{ detail.config.deviceCode || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">所在部门：</div>
          <div class="info-value">
            {{ departmentName ? departmentName + " / " : "" }}
            <span v-if="!isLastLevel">
              {{ detail.config.departmentName || "" }}
            </span>
          </div>
        </div>
        <div class="info-list-item" v-if="detail.record.replaceType === 2">
          <div class="info-title">部件名称：</div>
          <div class="info-value">
            {{ detail.record.componentName || "" }}
          </div>
        </div>
        <div class="info-list-item" v-if="detail.record.replaceType === 2">
          <div class="info-title">部件规格：</div>
          <div class="info-value">{{ detail.record.stockCatName || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">更换周期：</div>
          <div class="info-value">
            {{ detail.config.replaceCycle || "" }}
            {{ replaceCycleUnitText[detail.config.replaceCycleUnit || 0] }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">更换状态：</div>
          <div class="info-value">
            <template v-if="detail.record.status === 11">
              提前
              {{ detail.record.advanceTime }}
              天
            </template>
            <template v-else>
              {{ detail.record.residueTime > 0 ? "" : "逾期" }}
              {{
                detail.record.residueTime > 0
                  ? ""
                  : -detail.record.residueTime + "天"
              }}
            </template>
            <span
              style="margin-left:8px"
              :class="'status' + detail.record.status"
            >
              {{ detail.record.status | statusText }}
            </span>
          </div>
        </div>
      </div>
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">更换结果：</div>
          <div class="info-value">{{ detail.record.replaceResult || "" }}</div>
        </div>
        <div class="info-list-item">
          <div class="info-title">更换人：</div>
          <div class="info-value">
            {{ detail.record.operatorName || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">更换时间：</div>
          <div class="info-value">
            {{ detail.record.updateTime | formatDate }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">描述：</div>
          <div class="info-value">
            {{ detail.record.remark || "" }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title"></div>
          <div class="info-value">
            <template v-if="detail.record.pictures">
              <x-img
                v-for="(item, index) in detail.record.pictures.split(',')"
                :src="item"
                :key="index"
                @click.native="
                  showImage(index, detail.record.pictures.split(','))
                "
              ></x-img>
            </template>
          </div>
        </div>
        <div
          class="info-list-item"
          v-if="detail.record.workSheetId"
          @click="toWorkSheetNo(detail.record.workSheetId)"
        >
          <div class="info-title">关联工单：</div>
          <div class="info-value">
            {{ detail.record.workSheetSn || "" }}
          </div>
        </div>
      </div>
    </div>
    <showImg
      :list="fileList"
      :index="showImgIndex"
      :show.sync="showImg"
    ></showImg>
  </div>
</template>

<script>
import { XImg, XInput, XDialog, TransferDom } from "vux";
import DeviceDao from "@/daos/device_dao";
import showImg from "@/components/common/showImg/showImg";
export default {
  directives: {
    TransferDom
  },
  inject: ["backToHomepage"],
  components: {
    showImg,
    XImg,
    XInput,
    XDialog
  },
  data() {
    return {
      buttonShow: false,
      detail: {},
      chartData: [],
      imgUrl: "",
      curMeterValue: "",
      departmentName: "",
      showDialogImg: false,
      showMore: false,
      replaceCycleUnitText: ["", "天", "周", "月", "年"],
      detail: {
        record: {},
        config: {}
      },
      id: 0,
      status: 0,
      isLastLevel: 0,
      fileList: [],
      showImg: false,
      showImgIndex: 0,
      type: 1
    };
  },
  computed: {},
  filters: {
    statusText(key) {
      let text = "";
      switch (key) {
        case 1:
          text = "未更换";
          break;
        case 3:
          text = "逾期未更换";
          break;
        case 5:
          text = "更换完成";
          break;
        case 7:
          text = "逾期完成";
          break;
        case 9:
          text = "无需更换";
          break;
        case 11:
          text = "提前更换";
          break;
        default:
          text = "未更换";
          break;
      }
      return text;
    }
  },
  mounted() {
    this.id = this.$route.query.id || this.detail.id || 0;
    this.departmentName = this.$route.query.departmentName || "";
    this.isLastLevel = this.$route.query.isLastLevel || 0;
    this.getReplaceTaskRecordDetails(this.id);
  },
  methods: {
    spotCheckView() {
      history.back(-1);
    },

    getReplaceTaskRecordDetails(id) {
      DeviceDao.getReplaceTaskRecordDetails(id, res => {
        if (res) {
          this.detail = res;
          this.curDepartment.id = res.record.departmentId;
          this.curDepartment.departmentName = res.record.departmentName || "";
        }
      });
    },

    toWorkSheetNo(id) {
      this.$router.push({
        name: "workOrderDetails",
        query: {
          id
        }
      });
    },
    showImage(index, files) {
      this.fileList.splice(0, this.fileList.length);
      this.fileList = files;
      this.showImgIndex = index;
      this.showImg = true;
    }
  }
};
</script>
<style lang="less">
// .info-list {
//   .vux-table.vux-table-bordered::before {
//     background-color: #c7c7c7;
//   }
//   .vux-table::after {
//     background-color: #c7c7c7;
//   }
// }
</style>
<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transform: translateY(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-140%);
}

.orderDetail {
  width: 100%;
  height: 100vh;
  background-color: #18182c;
  &.show-more-open {
    overflow: hidden;
  }
  .energy-title {
    height: 44px;
    background: #18182c;
    padding: 0 15px;
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    position: relative;
    .backHistory {
      font-size: 26px;
      color: #fff;
    }
    .nav-left {
      display: flex;
      align-items: center;
    }
    .nav-center {
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .nav-border-left {
      border-left: 2px solid #fff;
      height: 16px;
    }
    .nav-right {
      position: relative;
      // width: 30px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .paidan {
        margin-top: -8px;
        i {
          font-size: 26px;
        }
      }
    }
  }
  .table-chart {
    color: #fff;
    th {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
      text-align: center;
      padding: 8px 0;
    }
    th:nth-child(4) {
      width: 150px;
    }
    td {
      font-size: 14px;
      text-align: center;
      box-sizing: border-box;
      padding: 8px 0;
      // border-bottom: 1px solid #ebeef5;
    }
    td,
    th {
      border-right: 1px solid #c0c4cc;
    }
    td:nth-child(1),
    th:nth-child(1) {
      border-left: 1px solid #c0c4cc;
    }
    th {
      border-top: 1px solid #c0c4cc;
    }
    td,
    th {
      border-bottom: 1px solid #c0c4cc;
    }
  }

  .MoreDataP {
    background: #22233f;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transition: transform 0.3s ease-in-out;
    // transform: translateY(-140%);
    input {
      &::placeholder {
        color: gray !important;
      }
    }
    .nav-center {
      font-size: 16px;
      color: #fff;
      line-height: 44px;
      text-align: center;
    }
    .MoreDataPInner {
      width: 100%;
      color: #ffffff;
    }
    &.show {
      // display: block;
      transform: translateY(0);
    }
    &.hide {
      // display: none;
      transform: translateY(-140%);
    }
    .searchItem {
      padding: 0 15px;
      margin-bottom: 10px;
      &.addP {
        padding-bottom: calc(~"100vh - 400px") !important;
      }
      .title {
        font-size: 16px;
        margin: 8px 0;
      }
      .inner {
        input[type="text"] {
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          background: #292a4d;
          width: 100%;
          margin-bottom: 12px;
          color: #fff;
          padding: 0 8px;
          transition: background 0.3s ease-in-out;
          &:focus {
            background: #383a69;
          }
          &::placeholder {
            line-height: 30px;
          }
        }

        .time {
          display: flex;
          align-items: center;
          font-size: 16px;
          padding: 0 4px 4px;
          background: #292a4d;
          .time-text {
            width: 20px;
            padding: 0 3px;
            text-align: center;
          }
          .time-span {
            flex: 1;
            padding: 2px 0;
            text-align: center;
            border-bottom: 1px solid #dedede;
          }
        }
      }
    }

    .BtnGroup {
      display: flex;
      width: 100%;
      height: 44px !important;
      line-height: 44px !important;
      transition: 0.3s all;
      margin-top: 32px;
      div {
        text-align: center;
        height: 44px !important;
        border-top: 1px #3967dc solid;
        border-bottom: 1px #3967dc solid;
      }
    }
    .btn-reset {
      flex: 1;
      background: #22233f;
      padding: 0 15px;
      border-radius: 0;
      color: #456de6;
      line-height: 44px !important;
      transition: 0.3s all;
      &.active {
        background: #456de6;
        color: #fff;
      }
    }
    .btn-over {
      flex: 2;
      background: #3967dc;
      padding: 0 15px;
      color: #fff;
      border-radius: 0;
      line-height: 44px !important;
      transition: 0.3s all;
      &.active {
        background: #6e92ff;
      }
    }
  }
}
.cate-nfo {
  height: auto;
  // min-height: calc(~"100vh" - 80px);
  padding: 0 8px 8px;
  border-radius: 8px;
  background-color: #18182c;
  .info-list {
    background: #22233f;
    padding: 8px 0;
    margin: 8px 0;
    // min-height: 260px;
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      margin: 8px 0;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 100px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;

      .status1,
      .status4 {
        color: #4fa8e7;
      }
      .status3 {
        color: #456de6;
      }
      .status5,
      .status7,
      .status11 {
        color: #dd9710;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }
    }
    .modify-btn {
      font-size: 14px;
      margin-left: 8px;
      color: gray;
    }
    .warning {
      color: #ff2c2c;
    }
    .modify {
      font-size: 16px;
      padding: 8px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
</style>
<style lang="less">
.energy-img-dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
